<template>
  <el-card style="max-width: 280px">
    <template #header>
      <TodoListInput @sentContent="sentContent" />
    </template>
    <ul>
      <TodoListContent :datas="datas" @delContent="delContent" />
    </ul>
    <template #footer>
      <TodoListFooter :datas="datas" @delSelect="delSelect" />
    </template>
  </el-card>
</template>

<script setup>
import TodoListInput from './components/TodoListInput.vue'
import TodoListContent from './components/TodoListContent.vue'
import TodoListFooter from './components/TodoListFooter.vue'

import { ref, watch, onMounted } from 'vue'

// 挂载后将本地存储的数据渲染到页面上
onMounted(() => {
  let comment = JSON.parse(localStorage.getItem('comments')) || []
  datas.value = comment
})
let datas = ref([])
// 回车添加待办事项
const sentContent = (data) => {
  datas.value.push({ id: Date.now(), ischecked: false, content: data })
}
// 删除单个待办事项
const delContent = (index) => {
  datas.value.splice(index, 1)
}

// 删除勾选的待办事项
const delSelect = (newD) => {
  datas.value = newD
}
// 监听datas的数据变化，将数据存入本地存储
watch(datas, (newV) => {
  localStorage.setItem('comments', JSON.stringify(newV))
}, { deep: true })

</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
  list-style-type: none;
  box-sizing: border-box;
}

#box {
  width: 240px;
}
</style>